<template>
    <div class="root container">
        <div class="top-bar">
            <el-button style="color: aliceblue;" class="username" text round>{{ data.nickname
                }}</el-button>
            <el-button v-if="private || exp_reader" style="color: aliceblue;" class="username" text round
                @click="edit('full_name')">{{ data.full_name }}</el-button>

            <el-tooltip v-if="!private && !this.followed" class="box-item" effect="light" content="关注我"
                placement="top-start">
                <el-badge :value="this.followed_count" class="item">
                    <el-button style="margin-left: 100px;" size="large" large type="success" circle @click="followMe">
                        <el-icon>
                            <Star />
                        </el-icon>
                    </el-button>
                </el-badge>

            </el-tooltip>

            <el-tooltip v-if="!private && this.followed" class="box-item" effect="light" content="取消关注"
                placement="top-start">
                <el-badge :value="this.followed_count" class="item">
                    <el-button style="margin-left: 100px;" size="large" large type="danger" circle @click="unFollowMe">
                        <el-icon>
                            <Star />
                        </el-icon>
                    </el-button>
                </el-badge>
            </el-tooltip>

            <el-tooltip v-if="private" class="box-item" effect="light" content="不能关注自己" placement="top-start">
                <el-badge :value="this.followed_count" class="item">
                    <el-button  style="margin-left: 100px;" size="large" large type="info" circle>
                        <el-icon>
                            <Star />
                        </el-icon>
                    </el-button>
                </el-badge>
            </el-tooltip>

        </div>
        <div class="header">
            <div class="icon-box">
                <el-avatar class="icon" :key="avatar" :src="avatar">
                    <el-icon class="el-avatar--icon" :size="120">
                        <UserFilled />
                    </el-icon>
                </el-avatar>
                <el-upload accept="image/jpeg" v-if="private" class="icon-mask" :http-request="uploadAvatar" name="Img"
                    :show-file-list="false" :auto-upload="true">
                    <el-icon :size="60" color="#1890ffdc">
                        <Upload />
                    </el-icon>
                </el-upload>
            </div>

            <span style="font-size: 3ex;margin-left: 12px;margin-top: 5px;">ID: {{ data.id }}</span>




        </div>
        <div class="content">
            <el-divider></el-divider>
            <el-form label-width="100px">
                <el-row>
                    <el-col :span="12">
                        <el-form-item @click="edit('eudcation')">
                            <template #label>
                                <el-icon :size="20">
                                    <Medal />
                                </el-icon>
                                <span>最高学历</span>
                            </template>
                            <span>{{ data.eudcation }}</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item @click="edit('interested_position')">
                            <template #label>
                                <el-icon :size="20">
                                   <Opportunity />
                                </el-icon>
                                <span>兴趣岗位</span>
                            </template>
                            <span>{{ data.interested_position }}</span>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item @click="edit('sex')">
                            <template #label>
                                <el-icon :size="20">
                                    <Link />
                                </el-icon>
                                <span>真实性别</span>
                            </template>
                            <span>{{ data.sex }}</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item @click="edit('address')">
                            <template #label>
                                <el-icon :size="20">
                                    <Position />
                                </el-icon>
                                <span>联系地址</span>
                            </template>
                            <span>{{ data.address }}</span>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item @click="edit('email')">
                            <template #label>
                                <el-icon :size="20">
                                    <Message />
                                </el-icon>
                                <span>电子邮箱</span>
                            </template>
                            <span>{{ data.email }}</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item @click="edit('phone')">
                            <template #label>
                                <el-icon :size="20">
                                    <Phone />
                                </el-icon>
                                <span>联系电话</span>
                            </template>
                            <span>{{ data.phone }}</span>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <!-- <el-col :span="12">
                        <el-form-item @click="edit('sex')">
                            <template #label>
                                <el-icon :size="20">
                                    <Phone />
                                </el-icon>
                                <span>真实性别</span>
                            </template>
                            <span>{{ data.sex }}</span>
                        </el-form-item>
                    </el-col> -->
                    <el-col :span="12">
                        <el-form-item @click="edit('school')">
                            <template #label>
                                <el-icon :size="20">
                                    <School />
                                </el-icon>
                                <span>毕业学校</span>
                            </template>
                            <span>{{ data.school }}</span>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row v-if="private || exp_reader">
                    <el-col :span="12">
                        <el-form-item>
                            <template #label>
                                <el-icon :size="20">
                                    <Collection />
                                </el-icon>
                                <span>简历展示</span>
                            </template>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="4"></el-col>
                    <el-col :span="16">
                        <el-upload v-if="private" :show-file-list="false" v-model="fileList" class="upload-demo" drag
                            accept="application/pdf" :http-request="uploadFile" :on-exceed="fileExceed"
                            :on-preview="downloadFile" :on-remove="handleFileRemove" :before-remove="beforeFileRemove"
                            :before-upload="beforeFileUpload">
                            <el-icon class="el-icon--upload"><upload-filled /></el-icon>
                            <div class="el-upload__text">
                                Drop file here or <em>click to upload</em>
                            </div>
                            <template #tip>
                                <div class="el-upload__tip">
                                    新上传的简历将会覆盖原有简历，请删除原有简历后再上传新简历！
                                </div>
                            </template>
                        </el-upload>
                    </el-col>
                    <el-col :span="4"></el-col>
                </el-row>
                <el-row v-if="exist_resume.length > 0 && (private || exp_reader)">
                    <el-col :span="4"></el-col>
                    <el-col :span="11">
                        <span style="color: #1890ff;">当前上传的简历： {{ exist_resume }}</span>
                    </el-col>
                    <el-col :span="3"> <el-button type="primary" @click="toResumeOp" round>优化简历</el-button>
                    </el-col>
                    <el-col :span="3"> <el-button type="primary" @click="downloadResume" round>下载简历</el-button>
                    </el-col>
                    <el-col v-if="private" :span="2"> <el-button type="danger" @click="deleteResume"
                            round>删除简历</el-button>
                    </el-col>
                    <!-- <el-col :span="4"></el-col> -->
                </el-row>
                <el-row v-if="exist_resume.length === 0 && (private || exp_reader)">
                    <el-col :span="4"></el-col>
                    <el-col :span="14">
                        <span style="color: #1890ff;">暂未上传简历</span>
                    </el-col>
                </el-row>
                <el-row v-if="private && exist_resume.length > 0">
                    <el-col :span="4"></el-col>

                </el-row>
            </el-form>

            <el-divider>
            </el-divider>
            <el-form v-if="data.can_add_extra_info" label-width="100px">
                <el-row>
                    <el-col :span="12">
                        <el-form-item>
                            <template #label>
                                <el-icon :size="20">
                                    <OfficeBuilding />
                                </el-icon>
                                <span>任职公司</span>
                            </template>
                            <span>{{ data.company }}</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item>
                            <template #label>
                                <el-icon :size="20">
                                    <Mouse />
                                </el-icon>
                                <span>所在职位</span>
                            </template>
                            <span>{{ data.job_title }}</span>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <el-row v-if="!data.can_add_extra_info">
                <span style="color: #1890ff;">暂未加入任何公司</span>
            </el-row>
            <el-row>
                <div style="height: 10px;" />
            </el-row>
            <el-row>
                <el-col :span="10"></el-col>
                <el-col :span="4"> <el-button v-show="private" :disabled="!changed" type="primary" @click="submitUpdate"
                        round>保存修改</el-button>
                </el-col>
                <!-- <el-col :span="4"> 
                </el-col> -->
                <el-col :span="8"></el-col>
            </el-row>
        </div>
        <Dialog v-model="editor.visible" :title="editor.title" @submit="commit" @cancel="editor.visible = false">
            <template #content>
                <el-input maxlength="28" v-model="editor.data" />
            </template>
        </Dialog>
        <DelAccDialog v-model="del.visible" :title="del.title" @submit="deleteAccount" @cancel="del.visible = false">
            <template #content>
                <el-row>
                    <el-col :span="3"></el-col>
                    <el-col :span="11">
                        <el-text class="mx-1" type="danger"><strong>将删除账户的所有信息，是否继续？</strong></el-text>
                    </el-col>
                    <el-col :span="4"></el-col>

                </el-row>

            </template>
        </DelAccDialog>
    </div>
    <!-- <el-button type="primary" @click="test">test</el-button> -->
</template>
<script>
import Dialog from "@/components/tl/Dialog.vue"
import DelAccDialog from "@/components/tl/DelAccDialog.vue"
import { obsClient } from "@/utils/obs.ts"
import { ElMessage } from 'element-plus'
import { useAccountStore } from '@/stores/account.ts'
import { getPersonalInfo, updatePersonalInfo, getExpInfo, getFollowCount, getFollowStatus, handleFollowMe, handleUnFollowMe } from '@/api/path/tl/personal.js'
import { mapState } from 'pinia'
import { Star, Message } from '@element-plus/icons-vue'

export default {
    data() {
        return {
            // 简历列表
            fileList: [],
            // 个人基本信息
            data: {
                // nickname: 'abc',// name
                // full_name: '张三',// text
                // id: "12345678999999",
                // eudcation: '未知', //education
                // interested_position: '未知',// skills
                // blog_or_repo_link: '未知',// height
                // address: '未知',// address
                //
                // company: 'tencent',
                // job_title: 'PO',
                // can_add_extra_info: true,
                //
                // email: '12345678999999@qq.com',
                // phone: '12345678999',
                // sex: '男',
                // school: 'BUAA',
                nickname: '',// name
                full_name: '',// text
                id: "",
                eudcation: '', //education
                interested_position: '',// skills
                blog_or_repo_link: '',// height
                address: '',// address
                company: '',
                job_title: '',
                can_add_extra_info: true,
                email: '',
                phone: '',
                sex: '',
                school: '',
                intended_position: '',
            },
            editor: {
                visible: false,
                title: '修改信息',
                key: '',
                data: '',
            },
            // 头像链接
            avatar: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
            // 信息是否被修改
            changed: false,
            // 上传简历链接
            avatar_id: -1,
            del: {
                visible: false,
                title: '删除账号',
            },
            // 是否当前用户是本人
            private: true,
            exp_reader: true,
            exist_resume: "",
            followed: false, // 是否关注 关注人：登录者，被关注人：from_user_id 本人只显示关注数量
            followed_count: 0, // 关注数量
        }
    },
    components: {
        Dialog,
        DelAccDialog
    },
    methods: {
        toResumeOp(){
            this.$router.push({
                path: "/resumeOp",
            });
        },
        uploadAvatar(options) {
            let avatar_next_id = this.avatar_id === -1 ? 0 : this.avatar_id

            let key = "personal/avatar/" + this.data.id + "/avatar__" + avatar_next_id + ".jpeg"

            obsClient.putObject({
                Bucket: 'job-linker',
                Key: key,
                Body: options.file,
            }).then((result) => {
                // 接口调用完成，应进一步判断HTTP状态码
                if (result.CommonMsg.Status < 300) {// 操作成功
                    if (result.InterfaceResult) {
                        // 处理操作成功后业务逻辑

                        ElMessage({
                            message: '头像上传成功！',
                            type: 'success',
                        })

                        this.requestAvatar()
                    }
                } else {// 操作失败，获取详细异常信息
                    ElMessage({
                        message: '头像上传失败',
                        type: 'error',
                    })

                }
            })
        },
        test() {
            this.fileList.push('test.pdf')
        },
        beforeFileUpload(file) {
            console.log('beforeFileUpload', file)
            const validPDFTypes = ['application/pdf']
            let isPDF = validPDFTypes.includes(file.type)

            if (!isPDF) {
                this.$message.error('上传简历只能是 pdf 格式!');
            }

            return isPDF
        },
        // 简历已删除
        handleFileRemove(file, fileList) {
            console.log('handleFileRemove', file, fileList)
        },
        // 列表移除文件前 TODO 删除原文件
        beforeFileRemove(file, fileList) {
            console.log('beforeFileRemove', file, fileList)
            return true
        },
        // 下载简历
        downloadFile() {
            console.log('downloadFile')
        },
        resumeKey(id, file_name) {
            return "personal/resume/" + id + "/" + file_name
        },
        avatarKey(id) {

        },
        // 上传简历
        uploadFile(options) {

            if (this.exist_resume.length > 0) {
                ElMessage({
                    message: '请删除原有简历后再上传新简历！',
                    type: 'error',
                })
                return false
            }

            console.log('uploadFile', options)
            let key = this.resumeKey(this.data.id, options.file.name)
            obsClient.putObject({
                Bucket: 'job-linker',
                Key: key,
                Body: options.file,
            }).then((result) => {
                // 接口调用完成，应进一步判断HTTP状态码
                if (result.CommonMsg.Status < 300) {// 操作成功
                    if (result.InterfaceResult) {
                        // 处理操作成功后业务逻辑
                        this.exist_resume = options.file.name
                        ElMessage({
                            message: '简历上传成功！',
                            type: 'success',
                        })
                    }
                } else {// 操作失败，获取详细异常信息
                    ElMessage({
                        message: '简历上传失败',
                        type: 'error',
                    })
                    this.fileList.shift()
                }
            })
        },
        // 文件超出限制
        fileExceed(files, fileList) {
            console.log('fileExceed', files, fileList)

        },
        // 请求头像
        requestAvatar(id) {

            // let base_path = "personal/avatar/"+ this.data.id+'/'
            obsClient.listObjects({
                Bucket: 'job-linker',
                Marker: "personal/avatar/" + id + '/',
                //Prefix: 'avatar__'
            }).then((result) => {
                console.log("requestAvatar");
                console.log(result);
                if (result.InterfaceResult.Contents.length > 0) {

                    let contents = result.InterfaceResult.Contents
                    let element = contents[0]
                    let index = 0
                    for (index = contents.length - 1; index >= 0; index--) {
                        element = contents[index]
                        if (element.Key.endsWith('.jpeg') && element.Key.startsWith('personal/avatar/' + id + '/')) {
                            break
                        }
                    }

                    if (index < 0) {
                        return
                    }

                    this.avatar_id = index + 1
                    let path = element.Key
                    console.log("avatar_id", path)
                    obsClient.getObject({
                        Bucket: 'job-linker',
                        Key: path,
                        SaveByType: 'arraybuffer'
                    }).then((result) => {
                        console.log(result);
                        if (result.CommonMsg.Status < 300) {
                            // 假设arrayBuffer是你获得的ArrayBuffer对象
                            let arrayBuffer = result.InterfaceResult.Content

                            // 将ArrayBuffer转换为Blob对象
                            let blob = new Blob([arrayBuffer], { type: 'image/jpeg' });

                            // 创建一个指向Blob的URL
                            let url = URL.createObjectURL(blob);

                            // 创建下载链接
                            this.avatar = url;
                        } else {
                            ElMessage({
                                message: '头像加载失败！',
                                type: 'error',
                            })
                        }
                    })
                }
            })
        },
        // 注销账号
        deleteAccount() {
            console.log("delete account");
            this.del.visible = false;
        },
        // 呼出编辑框
        edit(key) {
            if (!this.private) return;
            // 非本人不可修改
            this.editor.key = key;
            this.editor.data = '';
            this.editor.visible = true;
        },
        // 提交修改(回调)
        commit() {
            if (!this.private) return;
            console.log('commit', this.editor.key, this.editor.data);
            if (this.editor.data == '') {
                this.$message.error('信息不能为空');
                return;
            }
            this.data[this.editor.key] = this.editor.data;
            this.editor.visible = false;
            this.changed = true;
        },
        // 提交修改(network)
        submitUpdate() {
            if (!this.private) return;
            console.log('submit update');
            let info = {
                userID: this.data.id,
                //userName: this.data.nickname,
                text: this.data.full_name,
                education: this.data.eudcation,
                skills: this.data.interested_position,
                intended_position: this.data.interested_position,
                height: 123,
                address: this.data.address,
                userEmail: this.data.email,
                phone: this.data.phone,
                sex: this.data.sex,
                school: this.data.school,
                intended_position:""
            }
            updatePersonalInfo(info).then(res => {
                console.log("submitUpdate", res)

                ElMessage({
                    message: '信息修改成功！',
                    type: 'success',
                })
                this.changed = false;
            })
                .catch(err => {
                    console.log("submitUpdate err", err)
                    ElMessage({
                        message: '信息修改失败！',
                        type: 'error',
                    })
                })

        },
        // 上传头像前验证
        beforeAvatarUpload(file) {
            console.log('beforeAvatarUpload', file)

            const validImageTypes = ['image/jpeg']
            let isPicture = validImageTypes.includes(file.type)
            let isLt4M = file.size / 1024 / 1024 < 4;

            if (!isPicture) {
                this.$message.error('上传头像图片只能是  jpg/jpeg/png/gif/bmp/webp 格式!');
            }
            if (!isLt4M) {
                this.$message.error('上传头像图片大小不能超过 4MB!');
            }
            let r = isPicture && isLt4M
            console.log('beforeAvatarUpload', r);
            return r;
        },
        requestResume(id) {
            obsClient.listObjects({
                Bucket: 'job-linker',
                Marker: "personal/resume/" + id + '/',
                //Prefix:'resume__'
            }).then((result) => {
                console.log("requestResume");
                console.log(result);
                if (result.InterfaceResult.Contents.length > 0) {

                    let i = -1;
                    for (i = 0; i < result.InterfaceResult.Contents.length; i++) {
                        let ele = result.InterfaceResult.Contents[i]
                        if (ele.Key.startsWith('personal/resume/' + id + '/')) {
                            break
                        }
                    }
                    if (i !== -1 && i < result.InterfaceResult.Contents.length) {
                        let path = result.InterfaceResult.Contents[i].Key
                        this.exist_resume = this.getLastSegment(path)

                    } else {
                        this.exist_resume = ''
                    }


                }
            })
        },
        getLastSegment(path) {
            return path.split('/').pop();
        },
        downloadResume() {
            //let path = "personal/resume/" + this.data.id + "/" + this.exist_resume
            let path = this.resumeKey(this.data.id, this.exist_resume)
            console.log("downloadResume", path);
            obsClient.getObject({
                Bucket: 'job-linker',
                Key: path,
                SaveByType: 'arraybuffer'
            }).then((result) => {
                console.log(result);
                if (result.CommonMsg.Status < 300) {
                    // 假设arrayBuffer是你获得的ArrayBuffer对象
                    let arrayBuffer = result.InterfaceResult.Content

                    // 将ArrayBuffer转换为Blob对象
                    let blob = new Blob([arrayBuffer], { type: 'application/octet-stream' });

                    // 创建一个指向Blob的URL
                    let url = URL.createObjectURL(blob);

                    // 创建下载链接
                    let downloadLink = document.createElement('a');
                    downloadLink.href = url;
                    downloadLink.download = this.exist_resume

                    downloadLink.click();
                } else {
                    ElMessage({
                        message: '简历下载失败！',
                        type: 'error',
                    })
                }
            })
        },
        deleteResume() {
            let path = "personal/resume/" + this.data.id + "/" + this.exist_resume
            console.log("deleteResume", path)
            obsClient.deleteObject({
                Bucket: 'job-linker',
                Key: path,
            }).then((result) => {
                console.log(result);
                if (result.CommonMsg.Status < 300) {
                    if (result.InterfaceResult) {
                        this.exist_resume = ""
                        ElMessage({
                            message: '简历删除成功！',
                            type: 'success',
                        })
                    }
                } else {
                    this.$message.error('简历删除失败！');
                }
            })
        },
        initData(id) {
            //let id = this.user.id
            console.log("initData", id)
            this.data.id = id
            getPersonalInfo(id).then(res => {
                // if (res.code === 200) {
                console.log("initData-getPersonalInfo", res.message)
                this.data.id = res.message.id || 1
                this.data.nickname = res.message.name || '未知'
                this.data.full_name = res.message.text || '未知'
                this.data.eudcation = res.message.education || '未知'
                this.data.interested_position = res.message.skills || '未知'
                this.data.blog_or_repo_link = res.message.sex || '未知'
                this.data.address = res.message.address || '未知'
                this.data.email = res.message.email || '未知'
                this.data.phone = res.message.phone || '未知'
                this.data.sex = res.message.sex || '未知'
                this.data.school = res.message.school || '未知'
                //}
            }).catch(err => {
                console.log("initData err", err)
            })
        },
        initExp(id) {
            //let id = this.user.id
            getExpInfo(id).then(res => {
                console.log("initData-getExpInfo", res)
                if (res.errno === 58983) {
                    this.data.can_add_extra_info = false
                } else {
                    this.data.can_add_extra_info = true
                    this.data.company = res.enterprise
                    this.data.job_title = res.position
                }

            }).catch(err => {
                this.can_add_extra_info = false
            })
        },
        initFllow(id) {
            // 加载关注数量
            getFollowCount(id).then(res => {
                console.log("initData-getFollowCount", res)
                this.followed_count = res.msg
            }).catch(err => {
                console.log("initData-getFollowCount err", err)
            })

            if (id !== this.user.id) {
                if (!this.private) {
                    // 请求是否被关注 （关注人：登录者，被关注人：id）
                    getFollowStatus(this.user.id, id).then(res => {
                        console.log("initData-getFollowStatus", res)
                        if (res.code === 200) {
                            this.followed = this.string2bool(res.msg)
                        } else {
                            this.followed = false
                        }
                    }).catch(err => {
                        console.log("initData-getFollowStatus err", err)
                        this.followed = false
                    })
                }
            }


            // 请求关注数量
        },
        string2bool(str) {
            if (str === 'true' || str === true) {
                return true
            } else {
                return false
            }
        },
        followMe() {
            handleFollowMe(this.data.id).then(res => {
                console.log("followMe", res)
                this.followed = true
                this.followed_count += 1
            }).catch(err => {
                console.log("followMe err", err)
            })
        },
        unFollowMe() {
            handleUnFollowMe(this.data.id).then(res => {
                console.log("unFollowMe", res)
                if (res.errno === 1) {
                    this.followed = false
                    this.followed_count -= 1
                }
            }).catch(err => {
                console.log("unFollowMe err", err)
                ElMessage({
                    message: '取消关注失败！',
                    type: 'error',
                })
            })
        },
    },

    computed: {
        ...mapState(useAccountStore, ['user']),
        form_id() {
            let id = this.$route.query.id || this.$route.params.id || this.user.id
            return id
        },
        from_exp() {
            return this.$route.query.exp || this.$route.params.exp || false
        }
    },

    watch: {

    },

    created() { },

    beforeMount() {

    },
    // 加载个人信息 加载头像
    mounted() {
        document.title = "个人信息";
        this.exp_reader = this.from_exp
        if (this.user.id === -1) {
            //console.log("not login",this.user)
            // this.$router.replace("/login") 
            ElMessage({
                message: '请先登录！',
                type: 'error',
            })
        }
        else {

            if (this.form_id === this.user.id) {
                this.private = true
            } else {
                this.private = false
            }

            console.log("!!!login!!!", this.user)
            this.initData(this.form_id)
            this.initExp(this.form_id)
            for (let index = 0; index < 999999; index++) {
                //const element = array[index];
            }
            this.requestAvatar(this.form_id)
            this.requestResume(this.form_id)

            this.initFllow(this.form_id);
        }
    },
}
</script>

<style scoped>
/* global style */
* {
    padding: 0;
    margin: 0;
    list-style: none;
    box-sizing: border-box;

    --text-color: #1890ff;
    /* --bg-color: #bae7ff; */
    --bg-color: var(--color-background-soft);
    --active-color: #096dd9;
    --hover-text-color: #0050b3;
    --hover-bg-color: #91d5ff;
    --input-border-color: #69c0ff;
    --input-border-focus-color: var(--text-color);
    --input-hover-bg-color: var(--bg-color);

    --el-text-color-primary: var(--text-color);
    --el-text-color-secondary: var(--text-color);
    --el-text-color-regular: var(--text-color);
}

/* 全局设置 element ui dialog水平垂直居中 */
.el-dialog {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    margin: 0 !important;
}

.el-avatar {
    --el-text-color-disabled: #b5f5ec;
}

.el-input {
    --el-input-hover-text-color: var(--text-color);
    --el-input-border-radius: 30px;
    --el-input-border-color: var(--input-border-color);
    --el-input-hover-border-color: var(--input-border-focus-color);
    --el-input-focus-border-color: var(--input-border-focus-color);
}

.el-menu {
    --el-menu-bg-color: transparent;
    --el-menu-text-color: var(--text-color);
    --el-menu-active-color: var(--active-color);
    --el-menu-hover-text-color: var(--hover-text-color);
    --el-menu-hover-bg-color: none;
}

.container {
    width: 1100px;
    margin: 0 auto;
}

.input-light {
    --el-input-bg-color: var(--bg-color);
    --el-input-border-color: var(--input-border-color);
    --el-input-focus-border-color: var(--input-border-color);
}

/* 隐藏滚动条 */
::-webkit-scrollbar {
    display: none;
}

.root {
    background-color: #e6f7ff;
    margin: 30px auto;
    border-radius: 20px;
    box-shadow: 0 10px 20px lightgray;
    overflow: auto;
    border: 3px solid var(--bg-color);
}

.top-bar {
    height: 120px;
    background-image: linear-gradient(to left bottom, var(--bg-color), var(--hover-bg-color));
    display: flex;
    align-items: flex-end;
}

.username {
    font-size: 2em;
    margin-left: 152px;
    --el-fill-color-light: var(--bg-color);
    --text-color: #36cfc9;
}

.header {
    height: 80px;
    padding-left: 32px;
    display: flex;
    border: 6px solid var(--hover-bg-color);
    border-radius: 0 0 10px 10px;
}

.icon-box {
    transform: translateY(-50%);
    position: relative;
}

.icon,
.icon-mask {
    left: 0;
    border: 5px solid var(--hover-bg-color);
    border-radius: 50%;
    position: absolute;
}

.icon-box,
.icon,
.icon-mask {
    width: 120px;
    height: 120px;
}

.icon-mask {
    font-size: 20px;
    background-color: #bae7ff88;
    border-radius: 50%;
    display: none;
    justify-content: center;
    align-items: center;
}

.icon-box:hover .icon-mask {
    display: inline-flex;
}

.content {
    margin: 30px;
}

.content .el-icon {
    align-self: center;
}

.content .el-form-item:not(.no-click):hover {
    background-color: var(--hover-bg-color);
    cursor: pointer;
}
</style>